<template>
  <div>
    <!-- 
      v-model语法
       v-model="vue数据变量"
     -->
     <!-- 
       下拉框绑定
       注意：v-model要使用在select标签上
      -->
    来自于 <select v-model="city">
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="上海">上海</option>
    </select>
    <hr>
    <!-- 
      复选框

        当绑定的变量类型为 “数组” 的时候，变量就是和value属性双向绑定在一起

        当绑定的变量类型为 “非数组” 的时候，v-model绑定的变量和复选框的checked属性双向绑定在一起

     -->
     爱好：
    <input v-model="hobby" type="checkbox" value="敲代码"> 敲代码
    <input v-model="hobby" type="checkbox" value="干饭"> 干饭
    <input v-model="hobby" type="checkbox" value="睡觉"> 睡觉
<hr>
    <!-- 
      单选框
     -->
     性别：
     <input v-model="gender" type="radio" value="男"> 男
     <input v-model="gender" type="radio" value="女"> 女
  <hr>
     <!-- 
       多行文本域
      -->
      自我介绍：<textarea v-model="intro" ></textarea>
  </div>
</template>

<script>
export default {
  data(){
    return {
      city: "",
      hobby: [],
      gender: "男",
      intro: ""
    }
  }
}
</script>

<style>

</style>